<template>
	<view id="app">
		<!-- 收货地址 -->
		<view class="site mt30 mlr30">
			<!-- 列表star -->
			<view class="list" :class="{'active': item.status == 2}" v-for="(item,index) in list" :key="index"
				@click="selSite(item)">
				<!-- 上 -->
				<view class="top ptb30 bdb1se">
					<!-- 信息 -->
					<view class="info df aic">
						<view class="name f36 c333">{{item.name}}</view>
						<view class="tal ml20 c333 f30">{{item.mobile}}</view>
					</view>
					<!-- 更多 -->
					<view class="more mt20">
						<view class="desc oh c333 f32 l t2hd">{{item.area}}{{item.detail}}</view>
					</view>
				</view>

				<!-- 下 -->
				<view class="rows ptb10">
					<!-- 默认地址 -->
					<label class="btn df aic" @click.stop="selDefault(item,index)">
						<view class="sitecheck">
							<uni-icons :type="item.status == 2 ? 'checkbox' : 'circle'"
								:color="item.status == 2 ? '#FFA351' : '#9999'"></uni-icons>
						</view>
						<view class="txt ml10 c333 f30">
							<text v-if="item.status == 2">已设为默认</text>
							<text v-else>设为默认</text>
						</view>
					</label>
					<!-- 功能区 -->
					<view class="fun df aic c666 f32">
						<view class="edit df aic" @click.stop="edit(item)">
							<view class="icon">
								<uni-icons type="compose"></uni-icons>
							</view>
							<view class="txt ml10">编辑</view>
						</view>
						<view class="del df aic ml30" @click.stop="del(item,index)">
							<view class="icon">
								<uni-icons type="trash"></uni-icons>
							</view>
							<view class="txt ml10">删除</view>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 填充 -->
		<view class="fill"></view>

		<!-- 底部 -->
		<navigator url="/pages/my/site/newSite" class="footer ptb30 plr30" hover-class="none">
			<view class="btn pay">添加地址</view>
		</navigator>
	</view>
</template>
<script>
	// 定义全局变量that
	var that;
	export default {
		// 页面变量
		data() {
			return {
				// 类型
				type: 0,
				// 地址列表
				list: [],
			}
		},

		// 页面加载完成后
		onLoad(e) {
			that = this;

			// 判断返回类型
			if (e.type) {
				// 赋值类型
				that.type = e.type;
			}
		},

		// 显示
		onShow() {
			// 地址列表
			that.getAddress();
		},

		// 方法集
		methods: {
			// 地址列表
			getAddress() {
				// 请求接口 
				that.request({
					url: '/api/user_Address/getAddress',
					load: 1,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 赋值列表
							that.list = rs.data;
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 选择地址
			selSite(item) {
				// 判断类型
				if (that.type == 1) {
					// 缓存
					uni.setStorageSync('site', item);

					// 返回跳转
					uni.navigateBack();
				};
			},

			// 编辑地址
			edit(item) {
				// 跳转页面
				uni.navigateTo({
					url: '/pages/my/site/newSite?id=' + item.id,
				})
			},

			// 删除地址
			del(item, index) {
				// 请求接口 
				that.request({
					url: '/api/user_Address/removeAddress',
					// 上传数据
					data: {
						// 地址id
						id: item.id,
					},
					// 加载
					load: 1,
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 弹窗提示
							that.alert('删除成功');

							// 删除地址
							that.list.splice(index, 1);
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},

			// 选择默认
			selDefault(item, index) {
				// 请求接口 
				that.request({
					url: '/api/user_Address/setDefaultAddress',
					// 上传数据
					data: {
						// 地址id
						id: item.id,
					},
					// 调用成功
					success(rs) {
						// 返回成功
						if (rs.code == 1) {
							// 遍历地址列表
							that.list.forEach((e, i) => {
								// 判断下标 更改默认值
								if (i == index) {
									e.status = 2;
								} else {
									e.status = 1;
								}
							})

							// 重新赋值刷新页面
							that.list = Object.assign([], that.list);
						} else {
							//弹窗提示用户
							that.alert(rs.msg);
						}
					}
				})
			},
		},
	};
</script>
<style lang="less">
	// 激活的文字颜色
	@color1: #FFA351;

	// 地址
	.site {

		/* 列表 */
		.list {
			margin-bottom: 30rpx;
			padding: 0 30rpx;
			border-radius: 10rpx;
			background-color: white;
			transition: .3s;

			// 第二个列表
			&:nth-last-child(1) {
				margin-bottom: 150rpx;
			}
		}

		// 激活的列表
		.list.active {

			// 默认地址
			.btn .txt {
				color: @color1;
			}
		}
	}
</style>
